<style lang="less" rel="stylesheet/less" type="text/less">
    .api-views-financial-detail{
        padding-top: 20px;
        width: 100%;
       padding-left: 20px;
       min-width: 1186px;
       height: 100%;
	 }
</style>
<template>
	<div class="api-views-financial-detail">
		<index
			:data="data"
		/>
		<!-- 分页组件 -->
		<Row
			type="flex"
			class="row-page"
			justify="center">
			<Page
				:total="listTotal"
				:current="page_info.page"
				:page-size="page_info.per_page"
				:page-size-opts="[2,5,10]"
				placement="top"
				show-sizer
				show-total
				@on-change="pageChange"
				@on-page-size-change="perPageChange"
			/>
		</Row>
	</div>
</template>
<script>
import qs from 'qs';
import index from './index.vue';

export default {
	components: {
		index,
	},
	data() {
		return {
			token: '',
			customer_id: null,
			listTotal: null,
			data: [],
        	page_info: {
				// 分页信息
				page: 1,
				per_page: 10,

			},
			search_info: {

				page: 1,
				per_page: 10,
			},
		};
	},
	created() {
		this.id = this.$route.params.id;
		this.token = sessionStorage.getItem('token');
		this.detailList(this.page_info);
	},
	methods: {

		/**
       * 页码改变
       * @param  {string} page {当前页码}
       * @return {undefined}
       */
		pageChange(page) {
			this.search_info.page = page;
			this.search_info.per_page = this.page_info.per_page;
			this.detailList(this.search_info);
		},

		/**
       * 每页显示数改变
       * @param  {string} size {当前每页显示数}
       * @return {undefined}
       */
		perPageChange(size) {
			this.search_info.per_page = size;
			this.page_info.per_page = size;
			this.detailList(this.page_info);
		},


		/**
       * 请求详细流水数据
       *
       */
		detailList(param) {
			param.customer_id = this.id;
		    param.token = this.token;
			const query_str = qs.stringify(param);
			this.axios.post(`${window.location.origin}/admin/api/v1/admin/charges`, query_str)
				.then(({ data }) => {
					if (data.code === 200) {
						this.data = data.charges.data;
						this.listTotal = data.charges.total;
					} else if (data.code === 7003) {
						this.$Message.error({
							content: 'token验证失败,过期或token错误,请重新登录',
							duration: 5,
							closable: true,

						});
						this.$router.push({
							path: '/admin-login',
						});
					}
					else {
						throw new Error(data.error);
					}
				})
		            .catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});
				});

		},
	},
};
</script>
